import Vue from 'vue'
import Vuex from 'vuex'
import animation from './animation'
import compose from './compose'
import contextmenu from './contextmenu'
import copy from './copy'
import event from './event'
import layer from './layer'
import snapshot from './snapshot'
import lock from './lock'
import webSocket from './webSocket'

Vue.use(Vuex)

const data = {
    state: {
        ...animation.state,
        ...compose.state,
        ...contextmenu.state,
        ...copy.state,
        ...event.state,
        ...layer.state,
        ...snapshot.state,
        ...lock.state,
        ...webSocket.state,

        editMode: 'edit', // 编辑器模式 edit preview
        canvasStyleData: { // 页面全局数据
            width: 1920,
            height: 969,
            scale: 100,
        },
        componentData: [], // 画布组件数据
        curComponent: null,
        curComponentIndex: null,
        // 点击画布时是否点中组件，主要用于取消选中组件用。
        // 如果没点中组件，并且在画布空白处弹起鼠标，则取消当前组件的选中状态
        isClickComponent: false,
        airCityPlayer: null,
        aircityApi: null,

        echartsChange: false,//鼠标左键抬起后监听echarts的容器变化
        page: 0,
        dynamicTags: ['页面一'],//保存页面数据

        CloudStatus: null,
        showTableInfo: false, //所有实例列表的显示状态

        TitleName: '文本',
        PoolName: '',

        changeCloudWeb: false, //默认三维锁定

        CurrentInstanceId: '',//当前连接实例ID
        OnEvent: {},
    },
    mutations: {
        ...animation.mutations,
        ...compose.mutations,
        ...contextmenu.mutations,
        ...copy.mutations,
        ...event.mutations,
        ...layer.mutations,
        ...snapshot.mutations,
        ...lock.mutations,
        ...webSocket.mutations,
        saveOnEvent(state, OnEvent) {
            state.OnEvent = OnEvent
        },
        setCurrentInstanceId(state, CurrentInstanceId) {
            state.CurrentInstanceId = CurrentInstanceId
        },
        setchangeCloudWeb(state, changeCloudWeb) {
            state.changeCloudWeb = changeCloudWeb
        },
        setPoolName(state, PoolName) {
            state.PoolName = PoolName
        },
        setTitleName(state, TitleName) {
            state.TitleName = TitleName
        },
        setshowTableInfo(state, showTableInfo) {
            state.showTableInfo = showTableInfo
        },
        setStatus(state, CloudStatus) {
            state.CloudStatus = CloudStatus
        },
        setaircityApi(state, aircityApi) {
            state.aircityApi = aircityApi
        },
        setairCityPlayer(state, airCityPlayer) {
            state.airCityPlayer = airCityPlayer
        },
        setdynamicTags(state, dynamicTags) {
            state.dynamicTags = dynamicTags
        },
        setPage(state, page) {
            state.page = page
        },
        setechartsChange(state) {
            state.echartsChange = !state.echartsChange
        },
        setClickComponentStatus(state, status) {
            state.isClickComponent = status
        },

        setEditMode(state, mode) {
            state.editMode = mode
        },

        setCanvasStyle(state, style) {
            state.canvasStyleData = style
        },

        setCurComponent(state, { component, index }) {
            if (component) {
                if (component.style.page == state.page) {
                    state.curComponent = component
                    state.curComponentIndex = index
                } else {
                    state.curComponent = null
                    state.curComponentIndex = null
                }
            } else {
                state.curComponent = component
                state.curComponentIndex = index
            }
        },

        setShapeStyle({ curComponent }, { top, left, width, height, rotate }) {
            if (top) curComponent.style.top = Number(top)
            if (left) curComponent.style.left = Number(left)
            if (width) curComponent.style.width = Number(width)
            if (height) curComponent.style.height = Number(height)
            if (rotate) curComponent.style.rotate = Number(rotate)
        },

        setShapeSingleStyle({ curComponent }, { key, value }) {
            curComponent.style[key] = value
        },

        setComponentData(state, componentData = []) {
            Vue.set(state, 'componentData', componentData)
        },

        addComponent(state, { component, index }) {
            if (index !== undefined) {
                state.componentData.splice(index, 0, component)
            } else {
                component.style.page = state.page
                state.componentData.push(component)
            }
        },

        deleteComponent(state, index) {
            if (index === undefined) {
                index = state.curComponentIndex
            }

            if (index == state.curComponentIndex) {
                state.curComponentIndex = null
                state.curComponent = null
            }

            state.componentData.splice(index, 1)
        },

        deletePageComponents(state, index) {
            let arr = state.componentData.filter(item => item.style.page !== index)
            state.componentData = arr
            state.page = index - 1
            // state.componentData.splice(state.componentData.filter(item => item.style.page === index), 1)

            // state.componentData.splice(index, 1)
        },
    },
}

export default new Vuex.Store(data)